<template>
    <div>
        <div class="mt">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="saveCategory1">添加一级分类</el-button>
        <el-input class="mt" v-model="category1Name" placeholder="请输入类别"></el-input>
        </div>

        <div class="mt">
        <el-button  type="primary" icon="el-icon-plus" size="mini" @click="saveCategory2">添加二级分类</el-button>
        <el-form class="mt" >

            <!-- 一级分类 -->
            <el-form-item label="一级分类">
                <el-select
                        v-model="category1Id"
                        placeholder="请选择"
                        @change="catalog1Changed">
                    <el-option
                            v-for="catalog in catalogList1"
                            :key="catalog.id"
                            :label="catalog.name"
                            :value="catalog.id"/>
                </el-select>
            </el-form-item>

            <!-- 二级分类 -->
            <el-form-item label="二级分类">
                <el-input v-model="category2name"></el-input>
            </el-form-item>
            <el-form-item label="类别图标">
                <el-upload
                        :on-success="onUploadSuccess"
                        :before-upload="beforeUpload"
                        :on-preview="onUploadPreview"
                        :on-remove="onUploadRemove"
                        :multiple="true"
                        :action="'api/file/upload'"
                        class="upload-demo"
                        list-type="picture-card">
                    <i class="el-icon-plus"/>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>
                </el-upload>
            </el-form-item>
        </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CategoryMng",

        data(){
            return{
                category1Name:null,
                category1Id:null,
                catalogList1: [],
                category2name:null,
                iconUrl:null
            }
        },
        created(){
            this.axios.get('/admin/category1/get').then(res=>{
                this.catalogList1 = res
            });
        },
        methods:{
            saveCategory1(){
                const aa={
                    name:this.category1Name
                }
                this.axios.post("/admin/saveCategory1",aa).then(res=>{
                    this.$alert(res, 'success', {
                    confirmButtonText: '确定',
                    type: 'warning'
                })
                    location.reload();
                })
            },
            saveCategory2(){
                if (!this.category2name) {
                    this.$alert('二级分类不能为空', '提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    })
                    return false
                }
                if (!this.category1Id||!this.iconUrl) {
                    this.$alert('请选择一级分类和上传图标', '提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    })
                    return false
                }else {
                    const  aa={
                        icon:this.iconUrl,
                        category1Id:this.category1Id,
                        name:this.category2name
                    }
                    this.axios.post("admin/saveCategory2",aa).then(res=>{
                        this.$alert(res, 'res', {
                            confirmButtonText: '确定',
                            type: 'warning'
                        })
                    })
                    location.reload();
                    return true
                }

            },



            // 文件上传限制条件
            beforeUpload(file) {
                const isJPG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const isGIF = file.type === 'image/gif'
                const isLt2M = file.size / 1024 / 1024 < 2

                if (!isJPG && !isPNG && !isGIF) {
                    this.$message.error('上传头像图片只能是 JPG、PNG 或 GIF 格式!')
                    return false
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                    return false
                }
                return true
            },

            // 上传图片成功的回调
            onUploadSuccess(res, file) {
                this.iconUrl='/api/file/download?uniFileName='+file.response.data
            },

            // 上传的文件预览
            onUploadPreview(file) {
                this.dialogImageUrl = file.url
                this.dialogImageVisible = true
            },

            // 删除上传的文件
            onUploadRemove(file, fileList) {
                this.spuForm.spuImageList = []
                fileList.forEach(file => {
                    this.spuForm.spuImageList.push({
                        imgName: file.name,
                        imgUrl: '/api/file/download?uniFileName='+file.response.data
                    })
                })
            },

        }
    }
</script>

<style scoped>
.mt{
    margin-top: 20px;
}
</style>